<template>
  <div class="login-container">
    <h1>纵胜新材</h1>
    <form @submit.prevent="login">
      <input v-model="username" type="text" placeholder="用户名" required />
      <input v-model="password" type="password" placeholder="密码" required />
      <button type="submit">登录</button>
      <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import router from '../../router' // 确保路径正确
import { useUserStore } from '../../stores/sysUser'

const username = ref('')
const password = ref('')
const errorMessage = ref('')
const userStore = useUserStore()

const login = async () => {
  try {
    const isValid = userStore.validateUser(username.value, password.value)
    if (isValid) {
      localStorage.setItem('authToken', 'simulated_token')
      router.push({ name: 'home' })
    } else {
      throw new Error('用户名或密码错误')
    }
  } catch (error) {
    console.error('登录出错:', error)
    errorMessage.value = (error as Error).message
  }
}
</script>

<style scoped>
.error-message {
  color: red;
  margin-bottom: 10px;
  text-align: center;
  font-size: 14px;
}
</style>

<style scoped>
body {
  /* background-image: url('../assets/vue-bg.jpg');*/

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.login-container {
  margin-left: 750px; /* 调整左侧边距 */
  margin-top: 400px; /* 调整上侧边距 */
  background-color: rgba(255, 255, 255, 0.8); /* 半透明的白色背景，增强内容的可读性 */
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  width: 400px;
  height: 350px;
}

.login-container h1 {
  margin-bottom: 30px;
  color: #333;
  text-align: center;
}

.login-container input {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

.login-container input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.login-container button {
  width: 100%;
  padding: 15px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-container button:hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  margin-bottom: 10px;
  text-align: center;
  font-size: 14px;
}
</style>
